<template>
  <div class="tabs__nav">
    <label>{{ label }}</label>
    <ul>
      <li
        v-for="item in list"
        :key="item.id"
        class="noselect"
        :class="{ 'active': item === selectVal }"
        @click="checkSelect(item)"
      >{{ item }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    label: [String],
    list: [Array],
    value: [String, Number]
  },
  computed: {
    selectVal: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      }
    }
  },
  methods: {
    checkSelect(item) {
      if (this.selectVal === item) {
        this.selectVal = null;
      } else {
        this.selectVal = item;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import '@/styles/mixin.scss';
.tabs__nav {
  width: 100%;
  background: #f3f2f5;
  border-radius: 5px;
  display: flex;
  padding: 8px 16px;
  box-sizing: border-box;
  label {
    width: 70px;
    line-height: 25px;
    color: #757780;
    font-size: 12px;
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - 70px);
    li {
      color: #40424c;
      font-size: 12px;
      padding: 6px 10px;
      border-radius: 5px;
      margin-right: 5px;
      cursor: pointer;
      transition: all 0.5s ease;
      &:hover,
      &.active {
        background: $--color-primary;
        color: #fff;
      }
    }
  }
}
</style>

